<template>
	<div style="width: 100%;height: 100%;">
		<ul class="allul">
			<li v-for="file in tableData" class="itemli">
				<div class="image">
					<el-image :src="file.imgurl">
						 <div slot="error" class="image-slot">
						     <i class="el-icon-picture-outline"></i>
						 </div>
					</el-image>
				</div>
				<div class="message">
					<p>{{file.name}}</p>
					<p>错误： {{file.errMessage}}</p>
					<p>文件大小： {{file.size}}</p>
				</div>
				<i class="iconfont iconquxiao"></i>
			</li>
		</ul>
	</div>
</template>

<script>
	import bus from "@/bus/bus.js"
	export default {
		data() {
			return {
				tableData: [],
			}
		},
		mounted() {
			bus.$on("loadFail", (file, str) => {
				this.loadimgImg(file, str)
			});
		},
		methods: {
			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			},
			loadimgImg(file, str) {
				let obj = {};
				let imgurl = this.$store.state.baseHttp+file.url;
				obj.name = file.name;
				obj.imgurl = imgurl
				obj.size = file.size / 1000 + 'kb'
				obj.errMessage = str
				this.tableData.unshift(obj)
			}
		},
	}
</script>
<style scoped="scoped">
	.el-icon-picture-outline{
		font-size: 30px;
		color: #adadad;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.allul{
		padding: 10px 30px;
		margin-top: 20px;
		width: calc(100% - 60px);
		height: auto;
	}
	.itemli{
		border-top: 1px solid #d7dded;
		padding: 10px 20px;
		height: 100px;
		position: relative;
		width: calc(100% - 40px);
	}
	.itemli:last-child{
		border-bottom: solid #c2cae4 1px;
	}
	.image {
		float: left;
	}
	.image>>>.el-image {
		width: 150px;
		height: 100px;
		object-fit: cover;
		border: solid 1px #c8c8c8;
		border-radius: 10px;
	}
	.message{
		float: left;
		text-align: left;
		margin-left: 20px;
		font-size: 16px;
		color: #00506b;
	}
	.message p{
		margin-top: 10px;
	}
	.iconquxiao{
		position: absolute;
		right: 40px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 30px;
		color: #e40003;
	}
</style>
